@use "var.scss" as *;
@use "mixin.scss" as *;

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

#app,
body,
html {
  height: 100%;
}

#app {
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-size: 13px;
  font-weight: 400;
  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  overflow: hidden;
}

/* 色弱模式 */
.weak-mode {
  filter: invert(0.8);
}

/* 灰色模式 */
.grayscale-mode {
  filter: grayscale(100%);
}

/* 内容区域滚动条 */
.container-overflow {
  > .layout {
    height: 100%;

    .layout-container {
      overflow: auto;
    }
  }
}

.el-popup-parent--hidden {
  overflow: hidden;
}

/* dropdown条目的选择项样式 */
.dropdown-item-selected {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.jv-container .jv-code {
  overflow: hidden;
  padding: 0 !important;
}

.jv-node .jv-node {
  line-height: 21px !important;
}

.alert-margin {
  margin: 10px 0;
}

.line-ellipsis-1 {
  @include ellipsis-line(1);
}

.line-ellipsis-2 {
  @include ellipsis-line(2);
}

.box-shadow {
  @include box-shadow;
  border: none;
  transition: .3s;
  padding: 10px;
}

.dialog-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--el-text-color-primary);

  .svg-icon {
    font-size: 18px;
    margin-right: 5px;
  }
}

.alert-first-margin {
  margin-bottom: 1rem;
}

.app-container-main {
  --border-radius: 4px;
  --bg-color: var(--el-bg-color-overlay);
  border-radius: var(--border-radius);
  background-color: var(--bg-color);
  overflow: hidden;
  color: var(--el-text-color-primary);
  transition: var(--el-transition-duration);
  padding: 0.9rem 1rem;
}

.content-card {
  .el-descriptions__title {
    border-left: 3px solid var(--el-color-primary);
    padding-left: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
  }
}

.flex_05 {
  flex: 0.5;
}

.flex1 {
  flex: 1;
}

.flex_1_5 {
  flex: 1.5;
}

.flex2 {
  flex: 2;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank)) !important;
  color: fieldtext !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 auto #fff;
  -webkit-text-fill-color: #333237;
  caret-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  -webkit-transition-delay: 111111s;
  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}

.popper_class20 {
  max-width: 20rem !important;
}

.panel-group {

  .card-panel-col {
    margin-bottom: 8px;
  }
}

.flex-center, .flex-col-center {
  align-items: center;
  display: flex;
  justify-content: center;
}
